<template>
  <div class="box">
    <easy-player
      live
      muted
      autoplay
      :video-url="src"
      style="width: 100%; height: 700px"
      @error="restartPlayer"
      :id="id"
      :has-audio="false"
      ref="easyPlayer"
      :video-title="title"
    />
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.min.css";
import EasyPlayer from "@easydarwin/easyplayer";

export default {
  components: {
    EasyPlayer,
  },
  props: {
    src: {
      type: String,
    },
    id: [String, Number],
    title: {
      type: String,
    },
  },
  data() {
    return {
      player: null,
    };
  },
  watch: {},
  computed: {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
}

//视频进度工具栏的样式
::v-deep .vjs-live-display {
  line-height: 50px;
}
::v-deep .vjs-bitrate-control {
  line-height: 50px !important;
}
::v-deep .icon-luxiang2 {
  display: none !important;
}
::v-deep .vjs-snapshot-control {
  display: none !important;
}
::v-deep .video-title {
  font-size: 14px;
  left: 5px !important;
  right: 0px !important;
  max-width: 200px !important;
}
::v-deep .vjs-stretch-control {
  display: none !important;
}
::v-deep .vjs-icon-placeholder:before {
  font-size: 30px !important;
  line-height: 40px;
}
::v-deep .easy-player-loading {
  display: none !important;
}
</style>
